安裝套件

cmd

npm install ng2-charts@2.4.1 --save
npm install chart.js --save

各種圖表展示範例

Line Chart - 折線圖
https://stackblitz.com/edit/ng2-charts-line-template

Pie Chart - 圓餅圖
https://stackblitz.com/edit/ng2-charts-pie-template

Bar Chart - 長條圖
https://stackblitz.com/edit/ng2-charts-bar-template

Doughnut Chart - 圓環圖
https://stackblitz.com/edit/ng2-charts-doughnut-template

Radar Chart - 雷達圖
https://stackblitz.com/edit/ng2-charts-radar-template

Polar Area Chart - 極面圖(自己想叫圓面圖)
https://stackblitz.com/edit/ng2-charts-polar-area-template

Bubble Chart - 泡泡圖
https://stackblitz.com/edit/ng2-charts-bubble-template

Scatter Chart - 分散圖
https://stackblitz.com/edit/ng2-charts-scatter-template

匯入 Module

app.module.ts

import { ChartsModule } from 'ng2-charts';
// In your App's module:
imports: [
    ChartsModule
]

介紹

圖表型別

所有圖表類型都有一個 directive：baseChart，共八種類型：
line, bar, radar, pie, polarArea, doughnut, bubble and scatter

屬性

多數資訊還請參考 chart.js 的文件 http://www.chartjs.org/docs

• data (SingleOrMultiDataSet) - 設定一組數值給圖表，line, bar, radar and doughnut 使用 MultiDataSet， 其他使用 SingleDataSet
• datasets ({ data: SingleDataSet, label: string }[]) - label 像是 標題或提示
• labels (Label[]) - line, bar and radar 一定需要 x 軸提示； polarArea, pie and doughnut 則是在 觸碰到圖表內容才會顯示 x 軸提示；Label 可以是 string 或 string[]，representing a multi-line label where each array element is on a new line.
• chartType (ChartType) - 使用哪種圖表類型：line, bar, radar, pie, polarArea, doughnut (沒有 Scatter Chart - 分散圖 和 Bubble Chart - 泡泡圖)
• options (ChartOptions) - 圖表項目 參考 http://www.chartjs.org/docs/
• colors (Color[]) - 資料的顏色 - 沒有特別指定就 隨機給顏色
• legend: (boolean = false) - 假如是 true，在圖表下方顯示說明

事件

• chartClick - 當點擊圖表的內容後，回傳 啟用的 分數和提示
• chartHover - 當滑到圖表的內容後，回傳 啟用的 分數和提示

顏色(Colors)

原本就有設定幾個基礎的顏色，你可以使用 colors attribute 去替換顏色，假如有更多資料需要顏色，會隨機生成

參考來源

https://www.npmjs.com/package/ng2-charts